<style lang="scss" scoped>
.login {
    width: 100%;
    height: 100vh;
    display: flex;

    //  justify-content: center;
    //  align-items: center;
    .login1 {
        width: 600px;
        height: 200px;
        // border: 1px solid #ccc;
        padding: 20px;
        border-radius: 10px;

    }
}

.picter {
    padding: 20px;

    img {
        width: 100px;
        height: 40px;
    }

    h1 {
        margin-top: 10px
    }
}
</style>
<template>
    <div>
        <div class="picter">
            <img src="https://kano.guahao.com/UZf304375120?webp=80" class="x-img-fadein" normal="loaded">
            <h1>你好!欢迎登录微医</h1>
        </div>
        <div class="login">
            <van-form class="login1">
                <van-field v-model="tel" label="手机号" placeholder="手机号"
                    :rules="[{ required: true, message: '请填写手机号' }]"></van-field>
                <van-field v-model="password" type="password" label="密码" placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"></van-field>
                <div style="margin: 20px;">

                    <p class="agreement-box" data-v-5481d3af="">
                        <input type="checkbox" v-model="rember">
                        我已经认真阅读、理解并同意
                        <a href="/agreement" data-v-5481d3af="">《微医服务协议》</a><a href="/agreement/legal"
                            data-v-5481d3af="">《法律声明》</a><a href="/agreement/privacy" data-v-5481d3af="">《隐私权政策》</a><a
                            href="https://hd.guahao.com/n/29884" data-v-5481d3af="">《儿童个人信息处理规则》</a>
                    </p>
                </div>
                <van-button block type="primary" native-type="button" @click="dl"
                    style="margin-top: 10px;">登录</van-button>
                <p style="color: #ccc; text-align: center; margin-top: 20px; font-size: 16px;">未注册手机号验证后将自动登录</p>
                <p style="color: #ccc; text-align: center;  margin-top: 10px; font-size: 14px;">微医提供技术支持</p>
            </van-form>

        </div>

    </div>
</template>

<script lang="ts" setup>
import axios from '../../utils/request'
import { ref } from 'vue'
import { useRouter } from 'vue-router';
// import { showToast, showFailToast,showSuccessToast } from 'vant';
const tel = ref('')
const password = ref('')
const router = useRouter()
const rember = ref(false)
const dl = async () => {
    // const res = await axios.post('/api/v1/login', {
    //     tel: tel.value,
    //     password: password.value
    // })
    // const { token, data, message } = res.data
    // if (res.data.code == 200 && rember.value == true) {
    //     alert(message)
    //     localStorage.setItem('token', token)
    //     localStorage.setItem('user', JSON.stringify(data))
    //     router.push('/index')

    // } else {
    //     alert('请勾选同意用户协议')
    //     rember.value = true
    // }
    if (tel.value == '' || password.value == '') {
        alert('请输入手机号或密码')
    } else {
        const res = await axios.post('/api/v1/login', {
            tel: tel.value,
            password: password.value
        })
        const { token, data, message } = res.data
        if (res.data.code == 200 && rember.value == true) {
            alert(message)
            localStorage.setItem('token', token)
            localStorage.setItem('user', JSON.stringify(data))
            router.push('/index')

        } else {
            alert('请勾选同意用户协议')
            rember.value = true
        }
    }
}
</script>